<template>
	<!--  -->
	<view class="my-recharge" ref="uv-back-top">
		<uv-navbar v-if="!screen" title="充值" rightText="" @leftClick="navigateBack" :placeholder="true"></uv-navbar>
		<!--  customStyle="margin-bottom: 10px;width: 100%;overflow: auto;" -->
		<headers></headers>
		<el-container>
			<el-aside class="hidden-sm-and-down" width="500px">
				<my :heads="false"></my>
			</el-aside>
			<el-main style="margin: 0px;padding: 0px;">
				<view class="content">
					<uv-alert title="" type="warning"
						:description="vuex_user.exchange+'积分等于1'+coin+'，'+vuex_user.exchange+coin+'等于1元'"></uv-alert>
					<!-- [...['充值'+vuex_user.coin],...lists] -->
					<uv-subsection style="margin-top: 5px;" :list="lists" :current="current"
						custom-style="height: 60rpx;border-radius: 30rpx;" custom-item-style="border-radius: 30rpx;"
						@change="clickchange"></uv-subsection>
					<view
						style="margin: 0px;display: flex;justify-content:space-between;margin-bottom: 10px;flex-wrap: wrap;"
						justify="between">
						<view :class="level==item.level?'item_sff aty':'item_sff'"
							:style="screen?'width: 23%;':'width: 47%;'" v-for="(item,index) in vip" :key="item.price"
							@click="clickMember(item)">
							<uv-text v-if="item.name != '充值积分'" size="24" :text="item.name" align="center"></uv-text>
							<uv-text :text="'￥'+item.price" align="center"
								customStyle="color: #2979FF;font-weight:bold;font-size: 20px;"></uv-text>
							<view v-if="item.gift" class="float_gift" style="">
								首充赠送:<view style="font-weight:bold;">
									{{item.gift}}
								</view>
							</view>
							<view v-if="item.fracture&&Math.floor(item.price/(item.reset/10)*100)!=100"
								class="float_discount" style="">
								折扣:<view style="font-weight:bold;">
									{{ Math.floor(item.price*10/item.reset*100)}}
								</view>
							</view>
							<view v-if="item.reset" style="font-size: 20px;">
								<el-image style="margin-bottom: -7px;width: 23px; height: auto;" :src="img"
									fit="fill"></el-image>{{item.reset}}
							</view>
							<view v-if="item.reset" style="font-size: 12px;margin-top: 5px;">
								不消耗完的{{coin}}就自动清零
							</view>
							<view v-if="item.points" style="font-size: 16px;margin-top: 5px;">
								<el-image style="margin-bottom: -7px;width: 23px; height: auto;" :src="img"
									fit="fill"></el-image>{{(Number(item.points)+Number(item.gift||0))/vuex_user.exchange}}
							</view>
							<view v-if="item.name == '充值积分'" style="font-size: 12px;margin-top: 10px;">
								{{item.name+'：'+ (Number(item.points)+Number(item.gift||0))}}
							</view>
						</view>
					</view>
					<!-- <uv-row justify="center" customStyle="margin-bottom: 10px">
						<view>
							<uv-qrcode :h5SaveIsDownload="true" :value="'http://192.168.30.241:8080#/pages/my/recharge'"
								ref="qrcode" :options="options2">
							</uv-qrcode>
						</view>
						<view class=""
							style="padding: 10px;height: 200px;display: flex;justify-content: space-between;align-items: flex-start;flex-direction: column;">
							<view class="">
								<uv-text v-if="level==0" :text="'￥'+money" size="30"></uv-text>
								<uv-text v-else :text="'￥'+price" size="30"></uv-text>
							</view>
							<view class="">
								<uv-text text="支付方式"></uv-text>
								<uv-radio-group v-model="radiovalue">
									<uv-radio :customStyle="{margin: '8px'}" v-for="(item, index) in radiolist"
										:key="item.name" :label="item.name" :name="item.value"
										:disabled="item.disabled">
									</uv-radio>
								</uv-radio-group>
							</view>
						</view>
					</uv-row> -->
					<!-- :text="'立即支付 ￥'+price+'元'" -->
					<uv-button type="primary" shape='circle' customStyle="margin:10px 0px" @click="handlePay">
						<view style="font-size: 15px;display: flex;justify-content: center;align-items: center;">
							立即支付
							<view style="font-size: 20px;margin: 0px 5px;">
								{{price}}
							</view>
							元
						</view>

					</uv-button>
					<uv-text text="会员说明:购买会员套餐获得对应积分，积分可用于使用高级AI功能，套餐积分仅当月有效(从购买日起算)，跨月不叠加" color="#c1c1c1"
						size="12"></uv-text>
					<view class=""
						style="margin-bottom: 20px;color:#c1c1c1;font-size: 14px;;display: flex;justify-content: center;align-items: center;">
						支付即视为您同意
						<view @click="routed('/pages/my/protocol')" style="color:#2979FF;">《会员协议》</view>
					</view>
					<!-- <uv-divider text="VIP会员畅享特权" :dashed="true"></uv-divider>
			<uv-row customStyle="margin-bottom: 10px" justify="around">
				<uv-list v-for="(item,index) in tagsArray" :key="item[0].text">
					<uv-list-item v-for="(it,ind) in item" class="item_vip" :key="it.text">
						<uv-row justify="flex-start" customStyle="margin-bottom: 0px;padding:5px">
							<uv-image customStyle="margin-right:5px;" src="https://cdn.uviewui.com/uview/album/1.jpg"
								:lazy-load="true" radius="10px" width="45" height="45"></uv-image>
							<view class="">
								<uv-text text="无限AI对话"></uv-text>
								<uv-text text="3.5对话不限次数" customStyle="color:#A1A1A1;" size="12"></uv-text>
							</view>
						</uv-row>
					</uv-list-item>
				</uv-list>
			</uv-row> -->
				</view>
			</el-main>
		</el-container>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
		<tabbars :prop-value="4"></tabbars>
	</view>
</template>

<script>
	// 引入
	import avatar from './tabBar/avatar';
	import my from '@/pages/my/index'
	import headers from '@/components/header/header.vue';
	import tabbars from '@/components/tabbar/tabbar';
	import config from '@/common/config'
	import {
		getUser,
		Alipay,
		getMember,
		paymentQuery
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			tabbars,
			avatar,
			headers,
			my
		},
		data() {
			return {
				scrollTop: 0,
				loginUrl: config.loginUrl,
				lists: [], // "充值积分" "包月会员", "包年会员"
				current: 0,
				img: config.img,
				options2: {
					// data: 'https://www.uvui.cn',
					size: 300,
					useDynamicSize: false,
					errorCorrectLevel: 'Q',
					margin: 10,
					areaColor: "#ffffff",
					backgroundColor: "#FFF",
					// 指定二维码前景，一般可在中间放logo
					foregroundImageSrc: config.appName == '元画' ? '/static/logo2.png' : '/static/logo.png',
				},
				value: '',
				date: uni.$uv.date(new Date(), 'yyyy/mm/dd  hh:MM:ss'),
				timeData: {},
				// 基本案列数据
				radiolist: [{
					name: '微信支付',
					value: 'wxpay',
					disabled: true
				}, {
					name: '支付宝支付',
					value: 'alipay',
					disabled: false
				}],
				// uv-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue: 'alipay',
				level: 0,
				price: 0,
				vipData: [],
				vip: [],
				tagsList: [{
						text: '卡通动漫',
						checked: true
					},
					{
						text: '摄影写实',
						checked: false
					},
					{
						text: '主流国风',
						checked: false
					}, {
						text: '11',
						checked: false
					},
					{
						text: '22',
						checked: false
					},
					{
						text: '33',
						checked: false
					},
					{
						text: '11',
						checked: false
					},
					{
						text: '55',
						checked: false
					}
				],
			}
		},
		computed: {
			tagsArray() {
				const groups = [];
				let count = 0;
				const res = uni.$uv.sys();
				if (res.windowWidth < 768) {
					count = Math.ceil(this.tagsList.length / 2);
				} else if (res.windowWidth < 960) {
					count = Math.ceil(this.tagsList.length / 3);
				} else {
					count = Math.ceil(this.tagsList.length / 4);
				}
				// const count = this.screen ? this.tagsList.length / 4 : this.tagsList.length / 2;
				for (let i = 0; i < this.tagsList.length; i++) {
					this.tagsList[i]['index'] = i;
				}
				for (let i = 0; i < this.tagsList.length; i += count) {
					groups.push(this.tagsList.slice(i, i + count));
				}
				return groups;
			},
			changePrice() {
				return this.price + this.input;
			}
		},
		onLoad() {
			// const systemInfo = uni.getSystemInfoSync();
			// uni.$uv.toast('当前环境为 ' + systemInfo.platform);
			// if (systemInfo.platform === 'my') {
			// 	uni.$uv.toast('当前环境为支付宝小程序！')
			// 	// console.log('当前环境为支付宝小程序');
			// 	// 在这里执行支付宝特有的逻辑
			// } else {
			// 	uni.$uv.toast('当前环境不是支付宝小程序！')
			// 	// console.log('当前环境不是支付宝小程序');
			// }
			var that = this;
			this.getMember();
			// if (this.tradeNo) {
			// 	paymentQuery({
			// 		tradeNo: this.tradeNo,
			// 	}, {
			// 		custom: {
			// 			auth: true,
			// 			catch: true,
			// 		}
			// 	}).then(e => {
			// 		getUser({
			// 			custom: {
			// 				auth: true,
			// 				catch: false,
			// 			}
			// 		}).then(e => {
			// 			that.$uv.vuex('vuex_user', e);
			// 		})
			// 	})
			// }
			// uni.$uv.vuex('tradeNo', 'lv0_1733741082659_sEykVGxY6h');
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			clickchange(index) {
				this.current = index;
				this.vip = this.vipData[index].value;
				this.level = null;
			},
			// 计算金额
			// inputChange(e) {
			// 	this.$nextTick(() => {
			// 		let val = e.toString();
			// 		val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
			// 		val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
			// 		val = val.replace(/^0+\./g, '0.');
			// 		val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val
			// 		val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''

			// 		if (val.includes(".")) {
			// 			let numDian = val.toString().split(".")[1].length;
			// 			if (numDian === 2) {
			// 				this.money = val.length;
			// 			}
			// 		} else {
			// 			// this.moneyMaxLeng = 8;
			// 		}
			// 		if (val > 999) {
			// 			this.money = 999;
			// 		} else {
			// 			this.money = val;
			// 		}

			// 	});
			// },
			clickMember(e) {
				this.level = e.level
				this.price = e.price
			},
			getMember() {
				var that = this;
				getMember({
					custom: {
						auth: true,
						catch: false,
					}
				}).then(e => {
					this.vipData = e;
					this.vip = this.vipData[this.current].value;
					var list = [];
					for (var i = 0; i < this.vipData.length; i++) {
						this.lists.push(this.vipData[i].name);
					}
					this.clickMember(this.vip[0]);
				}).catch(e => {})
			},
			handlePay() {
				if (this.radiovalue == 'wxpay') {
					//微信支付
				} else if (this.radiovalue == 'alipay') {
					//支付宝支付
					this.callAliPay()
				}
			},
			getRandomInt(min, max) {
				min = Math.ceil(min); // 保证min是整数
				max = Math.floor(max); // 保证max是整数
				return Math.floor(Math.random() * (max - min + 1)) + min; // 生成介于min和max之间的整数
			},
			// getTradeNoFromUrl(url) {
			// 	const params = new URLSearchParams(url.split('?')[1]);
			// 	console.log(decodeURIComponent(url.split('?')[1]))
			// 	console.log('url', params.get('trade_no'));
			// 	this.$uv.vuex('tradeNo', params.get('trade_no'));
			// },
			callAliPay() {
				// 支付宝支付功能可用
				if (this.price) {
					Alipay({
						type: this.current,
						level: this.level,
						platform: uni.$uv.os(),
						isApp: this.isApp,
					}, {
						custom: {
							auth: true,
						},
					}).then(e => {
						// 进行支付请求  window.open(url, '_blank');
						// if (this.isPc) { 
						uni.$uv.route({
							url: '/pages/webview/webview?url=' + encodeURIComponent(e.result),
							intercept(params, next) {
								uni.$uv.toast('跳转支付中。。。');
								// 模拟处理等待
								setTimeout(() => {
									// uni.hideLoading();
									next(true);
								}, 1000)
							}
						})
						// this.$uv.vuex('tradeNo', e.tradeNo);
						// } else {
						// 	// uni.getProvider({
						// 	// 	service: 'payment',
						// 	// 	success: function(res) {
						// 	// 		console.log(JSON.stringify(res));
						// 	// 		if (~res.provider.indexOf('alipay')) {
						// 	// 			// 进行支付请求
						// 	// 			console.log(e);
						// 				uni.requestPayment({
						// 					provider: 'alipay',
						// 					orderInfo: e.result,
						// 					success: function(res) {
						// 						console.log('支付成功');
						// 					},
						// 					fail: function(err) {
						// 						console.log('支付失败', err);
						// 					}
						// 				})
						// 	// 		}
						// 	// 	},
						// 	// 	fail: function(err) {
						// 	// 		console.log(JSON.stringify(err));
						// 	// 		console.log('暂不支持支付宝支付');
						// 	// 	}
						// 	// })
						// }
					}).catch(e => {
						console.log(e);
						// that.routes('chat/index');
					})
				} else {
					return uni.$uv.toast('请选择套餐！')
				}

			},
			onChange(e) {
				this.timeData = e
			},
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			},
			routed(url) {
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-recharge {
		// width: calc(100% - 20px);
		width: 100%;

		.content {
			max-width: 800px;
			border-radius: 10px;
			border: 1px solid #eee;
			padding: 10px;
			margin-top: 5px;
		}

		.item_sff {
			height: auto;
			border: 1px solid #ffaaff;
			margin: 15px 1px 10px;
			padding: 10px 2px 10px;
			border-radius: 10px;
			text-align: center;
			position: relative;
			overflow: hidden;

			.float_gift {
				top: 0px;
				right: 0px;
				position: absolute;
				display: flex;
				justify-content: center;
				padding: 2px 5px;
				background-color: #aaaa00;
				color: #ffffff;
				border-bottom-left-radius: 10px;
			}

			.float_discount {
				top: 0px;
				right: 0px;
				position: absolute;
				display: flex;
				justify-content: center;
				padding: 2px 5px;
				background-color: #2979FF;
				color: #ffffff;
				border-bottom-left-radius: 10px;
			}

			.item_bottom {
				background-color: #ffaaff;
				width: 100%;
				text-align: center;
				height: 30px;
				margin-bottom: -10px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}
		}

		.aty {
			background: linear-gradient(to right, rgb(167, 168, 216), rgb(213, 213, 213));
		}

		.item {
			width: 90px;
			height: 80px;
			background: linear-gradient(to right, rgb(167, 168, 216), rgb(213, 213, 213));
			margin: 10px 5px 20px;
			border-radius: 10px;
			text-align: center;

			.item_bottom {
				background-color: #ffaaff;
				width: 100%;
				text-align: center;
				height: 30px;
				margin-bottom: -10px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}
		}

		.item_vip {
			width: 150px;
			height: 100px;
			background: linear-gradient(to right, rgb(249, 249, 249), rgb(222, 222, 222));
			margin-bottom: 20px;
			border-radius: 10px;
			text-align: center;

			.item_bottom {
				background-color: #ffaaff;
				width: 100%;
				text-align: center;
				height: 30px;
				margin-bottom: -10px;
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}

		}
	}


	// 测试
	.demo-layout {
		height: 24px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

</style>